<template>
	<view style="background-color: rgb(250, 250, 250);height: 100vh;">
		

		<view class="top">
			<view :class="titles=='all'?'top1':'top2'" @click="title('all')">
				全部
			</view>
			<view :class="titles==1?'top1':'top2'" @click="title(1)">
				已报名
			</view>
			<view :class="titles==2?'top1':'top2'" @click="title(2)">
				已失效
			</view>
		</view>
		<view>

			<view class="box" v-for="(item,index) in list" :key="index">
				<image class="box" src="../../../static/hdboxbj.png" mode=""></image>
				<view class="box1">
					<view style="width: 200rpx; height: 200rpx; overflow: hidden;" @click="$gopage('/pages/center/huodong/info?hid='+item.hid+'&id='+item.id,1)">
						<image :src="item.activity.thumb" mode="widthFix" style="width: 100%;"></image>
					</view>
					<view class="box1-1">
						<view class="box1-1-1" @click="$gopage('/pages/center/huodong/info?hid='+item.hid+'&id='+item.id,1)">
							<view class="box1-1-1biao" :style="item.activity.price>0?'background-image: url(../../../static/huodbiao1.png);':(item.activity.status==1?'':'../../../static/huodbiao2.png')">
								{{item.activity.price>0 ? '付费' : '公益'}}
							</view>
							<view class="box1-1-1text">
								{{item.activity.title}}
							</view>
							<view class="box1-1-1text1" :style="item.activity.status==1?'':'color: #000000;'">
								{{item.activity.status==1?'进行中':'活动结束'}}
							</view>
							
						</view>
						<view class="box1-1-2" @click="$gopage('/pages/center/huodong/info?hid='+item.hid+'&id='+item.id,1)">
							<image src="../../../static/hdsz.png" mode=""></image>
							<view class="box1-1-2text">
								{{item.activity.status==1 ? '报名时间：'+item.activity.stime+'-'+item.activity.etime:''}}
							</view>
						</view>
						<view class="box1-1-3">
							<view class="box1-1-3ann" @click="$gopage('/pages/center/huodong/info?hid='+item.hid+'&id='+item.id,1)">
								报名详情
							</view>
							<view v-if="item.activity.status!=1&&item.status>0" class="box1-1-3ann" style="background-color: rgb(238, 238, 238);">
								已报名
							</view>
							<view class="box1-1-3ann" @click="backmoney(item.id)" style="background-color: coral;" v-if="item.activity.status==1&&item.status==1">
								{{item.activity.price>0?'申请退款':'退出活动'}}
							</view>
							
							
						</view>
						
					</view>
				</view>
			</view>

		
			
		</view>
		<view class="title" v-show="titles==1">

		</view>

	</view>
</template>

<script>
	//我的活动列表
	var that;
	export default {
		data() {
			return {
				bartop: 0,
				titles: 'all',
				nextp:1,
				list:[]
			}
		},
		onLoad(e) {
			that = this;
			this.bartop = this.$bartop;
			that.getlist()
		},
		onReachBottom() {
			that.getlist();
		},
		methods: {
			title(e) {
				this.titles = e
				that.nextp = 1;
				that.getlist()
			},
			backmoney(id){
				uni.showModal({
					title:'退款提示',
					content:'确定要退出该活动吗？',
					success(e) {
						if(e.confirm){
							//走接口
							uni.showLoading({
								title:'加载中...'
							})
							that.$post('center/backhuodong',{id:id}).then(res=>{
								uni.hideLoading()
								if(res.code===0){
									uni.showModal({
										title:'操作提示',
										content:res.msg,
										showCancel:false,
										success() {
											that.nextp = 1;
											that.titles = 2;
											that.getlist()
										}
									})
								}else{
									uni.showToast({
										title:res.msg
									})
								}
							})
						}
					}
				})
			},
			getlist(){
				if(!that.nextp) return false;
				uni.showLoading({
					title:'加载中...'
				})
				that.$post('center/getmyhuodong',{p:that.nextp,type:that.titles}).then(res=>{
					uni.hideLoading()
					var list = res.data.list;
					if(that.nextp==1) {
						that.list = list;
					}else{
						for(var i=0; i<list.length; i++){
							that.list.push(list[i])
						}
					}
					that.nextp = res.data.nextp;
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100vw;
		// padding-top: 200rpx;
		margin-bottom: 20rpx;
		display: flex;
		background-color: white;
		justify-content: space-around;

		.top1 {
			padding: 10rpx 0;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #333333;
			border-bottom: rgb(255, 174, 69) solid 4rpx;

		}

		.top2 {
			padding: 10rpx 0;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #333333;
		}
	}

	.box {
		margin: 20rpx auto;
		width: 689rpx;
		height: 243rpx;

		.box1 {
			width: 689rpx;
			margin: 0 auto;
			margin-top: -250rpx;
			display: flex;

			>image {
				margin-left: 20rpx;
				width: 200rpx;
				height: 200rpx;
			}

			.box1-1 {
				margin-left: 20rpx;

				.box1-1-1 {
					display: flex;
					align-items: center;

					.box1-1-1biao {
						margin-right: 20rpx;
						background-image: url('../../../static/huodbiao.png');
						background-size: 60rpx;
						width: 60rpx;
						height: 25rpx;
						font-size: 18rpx;
						text-align: center;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #FFFFFF;
						text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
					}

					.box1-1-1text {
						width: 300rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #333333;
					}

					.box1-1-1text1 {
						margin-left: 32rpx;
						transform: rotate(45deg);
						font-size: 18rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #FFFFFF;
						white-space: nowrap;
					}
				}

				.box1-1-2 {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					>image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 20rpx;
					}

					.box1-1-2text {
						font-size: 18rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						color: #999999;
					}
				}

				.box1-1-3 {
					display: flex;
					flex-direction: row-reverse;
					margin-top: 80rpx;

					.box1-1-3ann {
						margin-right: 20rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						line-height: 52rpx;
						text-align: center;
						color: #FFFFFF;
						width: 138rpx;
						height: 52rpx;
						background-color: rgb(255, 174, 69);
						border-radius: 26rpx;
					}
				}
			}
		}
	}

	.bottom {
		margin-top: 40rpx;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.bottom1 {
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #FE8108;
		}

		>image {
			margin-left: 20rpx;
			width: 11rpx;
			height: 20rpx;
		}
	}

	.title {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title1 {
			margin: 0 auto;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #999999;
		}

		.title2 {
			background-size: 726rpx;
			width: 726rpx;
			height: 477rpx;

			.title2-1 {
				margin-top: -140rpx;
				margin-left: 40rpx;

				.title2-1text {
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 600;
					color: #333333;
				}

				.title2-1text1 {
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
</style>
